/* eslint-disable no-undef */
<template>
  <div class="home">
    <!-- banner -->
    <div class="banner">
      <section class="box">
        <h3>大众签章开放平台</h3>
        <p>安全稳定·合法合规·便捷高效</p>
        <button @click="applyClcik">申请接入</button>
      </section>
    </div>
    <!-- 服务特色 -->
    <div class="server">
      <h3>服务特色</h3>
      <ul class="server-list">
        <li v-for="item of serverList" :key="item.id" @click="serveClick(item.id)">
          <img :src="item.imgUrl" alt="icon" />
          <p>{{ item.name }}</p>
        </li>
      </ul>
      <ul class="server-contentList">
        <li class="server-contentList-boxImg" v-for="items of contentList" :key="items.id" v-show="cur == items.id">
          <div class="box">
            <span class="triagle"></span>
            <section class="content">
              <h4>{{ items.name }}</h4>
              <span></span>
              <p>{{ items.text }}</p>
            </section>
          </div>
        </li>
      </ul>
    </div>
    <!-- 适用场景 -->
    <div class="science">
      <div class="science-box">
        <h3>适用场景</h3>
        <div class="science-content">
          <div class="science-content-son">
            <div class="science-content-son-box">
              <img src="@/assets/images/home/science1.png" alt="science1" class="d" />
              <p>电子文件在签署过程中不脱离自身的业务系统。</p>
            </div>
          </div>
          <div class="science-content-son">
            <div class="science-content-son-box">
              <img src="@/assets/images/home/science2.png" alt="science1" class="d" />
              <p>无缝将开发平台的接口集成自身的业务系统中，用户全部的操作都在自身业务系统界面中完成。</p>
            </div>
          </div>
          <div class="science-content-son">
            <div class="science-content-son-box">
              <img src="@/assets/images/home/science3.png" alt="science1" class="d" />
              <p>开放平台支持在通过移动端、H5、PC、微信公众号和小程序中进行在线签署。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="science-banner">
      <div class="science-banner-son">
        <h5>携手共赢，与合作伙伴共建专业服务环境</h5>
        <div class="science-banner-son-box">
          <div>
            <p class="name"><span class="sp1">76</span>个数据接口</p>
            <img class="img1" src="@/assets/images/home/science_x1.png" alt="science" />
          </div>
          <div>
            <p class="name"><span class="sp2">32</span>种集成方案</p>
            <img class="img2" src="@/assets/images/home/science_x2.png" alt="science" />
          </div>
          <div>
            <p class="name"><span class="sp3">13</span>个使用场景</p>
            <img class="img3" src="@/assets/images/home/science_x3.png" alt="science" />
          </div>
        </div>
      </div>
    </div>
    <!-- 入驻流程 -->
    <div class="process">
      <div class="process-box">
        <h3>入驻流程</h3>
        <div class="process-box-son">
          <div>
            <img src="@/assets/images/home/process1.png" alt="Img" />
            <p>注册与认证</p>
          </div>
          <div>
            <img src="@/assets/images/home/process-x.png" alt="Img" />
            <p style="color:transparent">1</p>
          </div>
          <div>
            <img src="@/assets/images/home/process2.png" alt="Img" />
            <p>注册与认证</p>
          </div>
          <div>
            <img src="@/assets/images/home/process-x.png" alt="Img" />
            <p style="color:transparent">1</p>
          </div>
          <div>
            <img src="@/assets/images/home/process3.png" alt="Img" />
            <p>注册与认证</p>
          </div>
          <div>
            <img src="@/assets/images/home/process-x.png" alt="Img" />
            <p style="color:transparent">1</p>
          </div>
          <div>
            <img src="@/assets/images/home/process4.png" alt="Img" />
            <p>注册与认证</p>
          </div>
        </div>
        <button class="process-but" @click="applyClcik">申请接入</button>
      </div>
    </div>
    <common-footer></common-footer>
  </div>
</template>

<script>
import commonFooter from '../../common/commonFooter'
import { mapState } from 'vuex'
export default {
  name: 'Home',
  components: {
    commonFooter
  },
  data() {
    return {
      serverList: [
        {
          id: 0,
          name: '接口丰富',
          imgUrl: require('@/assets/images/home/serve1.png'),
          path: '/home'
        },
        {
          id: 1,
          name: '不涉及业务',
          imgUrl: require('@/assets/images/home/serve2.png'),
          path: '/home/servebusiness'
        },
        {
          id: 2,
          name: '方案丰富',
          imgUrl: require('@/assets/images/home/serve3.png'),
          path: '/home/serveprogramme'
        },
        {
          id: 3,
          name: '便捷高效',
          imgUrl: require('@/assets/images/home/serve4.png'),
          path: '/home/servefast'
        }
      ],
      cur: 0,
      contentList: [
        {
          id: 0,
          name: '接口丰富',
          text: '开放平台API接口丰富，开发者可以根据自己的业务系统根据实际情况灵活进行交互设计。',
          imgUrl: require('@/assets/images/home/serve1_1.png')
        },
        {
          id: 1,
          name: '不牵涉业务',
          text: '开放平台不牵涉业务，业务流程开发者在自身业务系统中完成。',
          imgUrl: require('@/assets/images/home/serve2_1.png')
        },
        {
          id: 2,
          name: '方案丰富',
          text: '开放平台提供丰富的集成方案，开发者可根据方案来集成和完善自身业务系统。',
          imgUrl: require('@/assets/images/home/serve3_1.png')
        },
        {
          id: 3,
          name: '便捷高效',
          text: '开放平台提供体验Demo，方便开发者能高效、快速集成。',
          imgUrl: require('@/assets/images/home/serve4_1.png')
        }
      ]
    }
  },
  methods: {
    serveClick(path) {
      this.cur = path
    },
    applyClcik() {
      if (this.loginShow == true) {
        this.$router.push('/console')
      } else {
        this.$router.push('/login')
      }
    }
  },
  computed: {
    ...mapState({
      loginList: modules => modules.login.loginList,
      userid: modules => modules.login.loginList.developer_id,
      token: modules => modules.login.loginList.token,
      loginShow: modules => modules.login.loginShow
    })
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/common.scss';
@import '~@/assets/css/home.scss';
</style>
